<template>
	<div
		class="loading-mask"
		:style="{ background, position: target ? 'absolute' : 'fixed' }"
	>
		<svg viewBox="25 25 50 50" class="circular">
			<circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
		</svg>
		<p v-if="text" :style="{ textColor }">{{ text }}</p>
	</div>
</template>
<script>
export default {
	data() {
		return {};
	},
};
</script>
<style lang="less" scoped>
.loading-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	z-index: 999999999;
	.circular {
		height: 35px;
		width: 35px;
		animation: loading-rotate 2s linear infinite;
		.path {
			animation: loading-dash 1.5s ease-in-out infinite;
			stroke-dasharray: 90, 150;
			stroke-dashoffset: 0;
			stroke-width: 2;
			stroke: #fff;
			stroke-linecap: round;
		}
	}
	p {
		color: #fff;
	}
}

@keyframes loading-rotate {
	100% {
		transform: rotate(1turn);
	}
}

@keyframes loading-dash {
	0% {
		stroke-dasharray: 1, 200;
		stroke-dashoffset: 0;
	}
	50% {
		stroke-dasharray: 90, 150;
		stroke-dashoffset: -40px;
	}
	100% {
		stroke-dasharray: 90, 150;
		stroke-dashoffset: -120px;
	}
}
</style>
